<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<!-- [Head] start -->

<head>
    <script src="/myhouse/static/ueditor/ueditor.config.js" type="text/javascript"></script>
    <script src="/myhouse/static/ueditor/ueditor.all.js" type="text/javascript"></script>
    <script src="/myhouse/static/mediator/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/myhouse/static/mediator/js/jquery-3.2.1.min.js"></script>
    <title>Typography | Berry Bootstrap 5 Admin Template</title>
    <!-- [Meta] -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
            name="description"
            content="Berry is made using Bootstrap 5 design framework. Download the free admin template & use it for your project."
    />
    <meta name="keywords" content="Berry, Dashboard UI Kit, Bootstrap 5, Admin Template, Admin Dashboard, CRM, CMS, Bootstrap Admin Template" />

    <!-- [Favicon] icon -->
    <link rel="icon" href="/myhouse/static/mediator/images/favicon.svg" type="image/x-icon" />
    <!-- [Google Font] Family -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" id="main-font-link" />
    <!-- [Tabler Icons] https://tablericons.com -->
    <link rel="stylesheet" href="/myhouse/static/mediator/fonts/tabler-icons.min.css" />
    <!-- [Material Icons] https://fonts.google.com/icons -->
    <link rel="stylesheet" href="/myhouse/static/mediator/fonts/material.css" />
    <!-- [Template CSS Files] -->
    <link rel="stylesheet" href="/myhouse/static/mediator/css/style.css" id="main-style-link" />
    <link rel="stylesheet" href="/myhouse/static/mediator/css/style-preset.css" id="preset-style-link" />

</head>
<!-- [Head] end -->
<!-- [Body] Start -->

<body>
<!-- [ Pre-loader ] start -->
<div class="loader-bg">
    <div class="loader-track">
        <div class="loader-fill"></div>
    </div>
</div>
<!-- [ Pre-loader ] End -->
<!-- [ Header Topbar ] start -->
<jsp:include page="/inc/mediatorTop.jsp"></jsp:include>
<!-- [ Header ] end -->
<!-- [ Sidebar Menu ] start -->
<nav class="pc-sidebar">
    <div class="navbar-wrapper">
        <div class="m-header">
            <a href="index.jsp" class="b-brand">
                <!-- ========   Change your logo from here   ============ -->
                <img src="/myhouse/static/mediator/images/logo-dark.svg" alt="" class="logo logo-lg" />
            </a>
        </div>
        <jsp:include page="/inc/mediatorLeft.jsp"></jsp:include>
    </div>
</nav>
<style type="text/css">
    /*#title{*/
    /*    width: 900px;*/
    /*    height: 400px;*/
    /*}*/
    table{
        font-size: 20px;
    }
    tr{
        height: 50px;
    }
</style>

<script type="text/javascript">
    var editor;
    $(function (){
        var op = {
            initialFrameHeight:400,
            initialFrameWidth:900,
            toolbars:[
                ['fontfamily','|','fontsize',"|","forecolor","|",'paragraph',"|","bold","|","italic","|","indent","|"],
                ['simpleupload',"|",'insertimage',"|","tolowercase","|","touppercase","|","undo","|","redo","|"],
                ['justifyleft',"|","justifyright","|","justifycenter","|","justifyjustify","|","rowspacingtop","|","rowspacingbottom","|"]
            ]
        }
     editor = UE.getEditor("title",op);
    });
</script>
<div class="pc-container">
    <div class="pc-content">
        <!-- [ breadcrumb ] start -->
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h5 class="m-b-10">查看所有房屋信息</h5>
                        </div>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/myhouse/mediator/index">首页</a></li>
                            <li class="breadcrumb-item"><a href="javascript: void(0)">管理房屋</a></li>
                            <li class="breadcrumb-item" aria-current="page">添加房屋信息</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
<div class="row">
    <!-- [ sample-page ] start -->
    <div class="col-sm-12">
        <div class="card">
            <div class="card-header">
                <h5>添加房屋信息</h5>
            </div>
            <div class="card-body" style="height: 1050px">
    <c:if test="${empty sessionScope.mediator.mediatorName}">
        <div id="mydiv">请先登录</div>
    </c:if>
    <c:if test="${not empty sessionScope.mediator.mediatorName}">
        <form action="/myhouse/mediator/AddHouseWrite" method="post" id="myform" enctype="multipart/form-data">
            <input type="hidden" value="${sessionScope.mediator.id}" name="mannerId">
            <table width="900px" align="center">
                <tr>
                    <td>选择城市:</td>
                    <td>
                        <select id="citySelect" name="city">
                            <option>--请选择--</option>
                            <c:forEach items="${requestScope.cityList}" var="city">
                                <option value="${city.cityName}">${city.cityName}</option>
                            </c:forEach>
                        </select>
                    </td>
                    <td>出售方式</td>
                    <td>
                        <select id="sellSelect" name="mediatorId">
                            <option>--请选择--</option>
                        </select>
                </tr>
                <tr>
                    <td>选择类型:</td>
                    <td>
                            <select id="typeSelect" name="type">
                                <option>--请选择--</option>
                                <c:forEach items="${requestScope.typeList}" var="type">
                                    <option value="${type.typeName}">${type.typeName}</option>
                                </c:forEach>
                            </select>
                    </td>
                    <td>卧室数量:</td>
                    <td><select id="roomSelect" name="room">
                        <option>--请选择--</option>
                        <c:forEach items="${requestScope.roomList}" var="room">
                            <option value="${room.roomNum}">${room.roomNum}</option>
                        </c:forEach>
                    </select></td>
                </tr>
                <tr>
                    <td>请输入价格（¥）:</td>
                    <td><input type="text" name="price" id="isRePrice">
                    <span id="span"></span>
                    </td>
                    <td>请输入面积（㎡）:</td>
                    <td><input type="text" name="area" id="isReArea"></td>
                </tr>
                <tr>
                    <td>房屋展示：</td>
                    <td colspan="4" style="text-align: left;width: 900px;">
                        <input type="file" name="img" id="img" style="position: relative; left: 200px; top: 100px"  >

                        <div style="border: 1px solid gray;width: 150px;height: 150px; overflow: hidden; ">
                            <img  src="" id="imgs" width="100px">
                        </div>

                    </td>
                </tr>
                <tr>
                    <td colspan="4">房屋信息:
                        <textarea id="title" name="houseInfo"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" style="text-align: center"><input type="submit" value="添 加" class="btn btn-secondary"></td>
                </tr>
            </table>
        </form>

    </c:if>
            </div>
        </div>
    </div>
    <!-- [ sample-page ] end -->
</div>
<!-- [ Main Content ] end -->
</div>
</div>
</script>
<script type="text/javascript">
    $(function (){
        $("#img").change(preview);
    })
    function preview(){
        var inputFile = document.getElementById("img");
        var files = inputFile.files;
        var fileReader = new FileReader();
        fileReader.onload = function (e){
            $("#imgs").attr("src",e.target.result);
        }
        fileReader.readAsDataURL(files[0]);
    }

</script>
<script type="text/javascript">
    $(function () {

        $("#typeSelect").change(function () {
            var  type = $("#typeSelect").val();
            if ($("#typeSelect").val() != "--请选择--" && $("#typeSelect").val() != "") {
                $.ajax({
                    url: "/myhouse/mediator/selectType",
                    type: "post",
                    data: {type: type},
                    success: function (data) {
                        $("#sellSelect").empty();
                        var op = $("<option></option>");
                        op.text("--请选择--");
                        $("#sellSelect").append(op)
                        for (var i = 0; i < data.length; i++) {
                            var option = $("<option></option>");
                            option.text(data[i].sellManner);
                            option.val(data[i].id);
                            $("#sellSelect").append(option)
                        }
                    }
                });
            }
        });
    });
</script>

<script type="text/javascript">
    $(function (){
        $("#isRePrice").blur(mm)
    });
    function mm(){
        var price = $("#isRePrice").val();
        if(parseInt(price)<=0){
            $("#span").text("亏本买卖？")
            $("#span").css("color","red")
        }
    }
</script>

<script type="text/javascript">
    //表单验证
    $(function (){
        $("#myform").submit(verifyHouseInfo);
    });
    function  verifyHouseInfo(){
        var city = $("#citySelect").val();
        var type = $("#typeSelect").val();
        var room = $("#roomSelect").val();
        var sell = $("#sellSelect").val();
        var price = $("input[name='price']").val();
        var area = $("input[name='area']").val();
        var content = editor.getContent();
        if (content != "" && city != "--请选择--" && type != "--请选择--" && room != "--请选择--" && sell != "--请选择--" && parseFloat(price) > 0  && parseFloat(area) > 0){
            return true;
        }else {
            return false;
        }
    }
</script>

<style type="text/css">
    #outer{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #mydiv{
        font-size: 100px;
        font-family: "华文楷体";
        text-align: center;
        margin-top: 100px;
    }
</style>
<!-- Required Js -->
<script src="/myhouse/static/mediator/js/plugins/popper.min.js"></script>
<script src="/myhouse/static/mediator/js/plugins/simplebar.min.js"></script>
<script src="/myhouse/static/mediator/js/plugins/bootstrap.min.js"></script>
<script src="/myhouse/static/mediator/js/config.js"></script>
<script src="/myhouse/static/mediator/js/pcoded.js"></script>

<script src="/myhouse/static/mediator/js/plugins/clipboard.min.js"></script>
<script>
    window.addEventListener('load', (event) => {
        var i_clip = new ClipboardJS('.color-block');
        i_clip.on('success', function (e) {
            var targetElement = e.trigger;
            let icon_badge = document.createElement('span');
            icon_badge.setAttribute('class', 'ic-badge badge bg-success float-end');
            icon_badge.innerHTML = "copied";
            targetElement.append(icon_badge);
            setTimeout(function () {
                targetElement.children[0].remove();
            }, 3000);
        });

        i_clip.on('error', function (e) {
            var targetElement = e.trigger;
            let icon_badge = document.createElement('span');
            icon_badge.setAttribute('class', 'ic-badge badge bg-danger float-end');
            icon_badge.innerHTML = "Error";
            targetElement.append(icon_badge);
            setTimeout(function () {
                targetElement.children[0].remove();
            }, 3000);
        });
    });
</script>
</body>
</html>
